First three.js scene
index.html
The index.html is the root of web page, it's the only file open directly in the browser, and all CSS and Javascript files are loaded via references from this file.
The code for index.html:
<!DOCTYPE html>
<html>
<head>
<title>Discoverthreejs.com - The Structure of a three.js App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="icon" href="http://discoverthreejs.com/favicon.ico" type="image/x-icon">
<!-- use main.css for styling -->
<link href="./styles/main.css" rel="stylesheet" type="text/css">
<!-- use main.js for scripting -->
<script type="module" src="./src/main.js"></script>
</head>
<body>
<h1>My first three.js scene: Hello, cube!</h1>
<!-- once app is running we will insert the three.js canvas into scene container -->
<div id="scene-container">
<!-- <canvas> will be inserted here -->
</div>
</body>
</html>
main.css
Within the <head> section of index.html, one of the <link> elements references the styles/main.css file:
<link href="./styles/main.css" rel="stylesheet" type="text/css">
The code for main.css:
body {
/* remove margins and scroll bars */
margin: 0;
overflow: hidden;
/* style text */
text-align: center;
font-size: 12px;
font-family: sans-serif;
}
h1 {
/* position the heading */
position: absolute;
width: 100%;
/* make sure that the heading is drawn on top */
z-index: 1;
}
#scene-container {
/* tell scene container to take up the full page */
position:absolute;
width: 100%;
height: 100%;
/* set the container's background color to the same as the scene's
background to prevent flashing on load
*/
background-color: skyblue;
}
main.js
Within the <head> section of index.html, one of the <script> elements references the src/main.js file:
<script type="module" src="./src/main.js"></script>
The code for main.js:
// if working on local server, change the path from '../../three/build/three.module.js' to 'https://cdn.skypack.dev/three@0.132.2';
// or 'https://threejsfundamentals.org/threejs/resources/threejs/r132/build/three.module.js'
import {
BoxBufferGeometry,
Color,
Mesh,
MeshBasicMaterial,
PerspectiveCamera,
WebGLRenderer,
Scene,
} from '../../three/build/three.module.js';
// get a reference to the container element that will hold our scene
const container = document.querySelector('#scene-container');
// scene is the 3d container for all objects in the scene, we can see it as a universe of 3d objects
// create a Scene
const scene = new Scene();
// set the background color
// if we dont set background color, the default color will be black
scene.background = new Color('skyblue');
// perspective camera is like a camera in the real world
// they use many same concept and terms, such as field of view and aspect ratio
// create a camera
const fov = 35; // AKA Field of View
const aspect = container.clientWidth / container.clientHeight;
// the near clipping plane, everything closer than this won't be rendered
const near = 0.1;
// the far clipping plane, everything further than this won't be rendered
const far = 100;
// these 4 parameters are used to create a bounded region of space, which we call the frustum
const camera = new PerspectiveCamera(fov, aspect, near, far);
// every object is initially created at ( 0, 0, 0)
// move the camera back so we can view the scene
// camera.position.x = 0;
// camera.position.y = 0;
// camera.position.z = 10;
// or we can use set() method instead of setting each property separately
camera.position.set(0, 0, 10);
// mesh is a visable object, include 2 properties: geometry and material
// before create mesh object, we need to create geometry and material
// geometry defines the shape of the mesh
// we will use a geometry named BufferGeometry
// we need a box-shaped geometry, so use BoxBufferGeometry, it is one of several basic shapes available in threejs core.
// create a geometry
// the contructor requires up to 6 parameters: width, height, depth, widthSegments, heightSegments and depthSegments
// here we provide only the first 3 parameters
// const length = 2;
// const width = 2;
// const depth = 2;
// const geometry = new BoxBufferGeometry(length, width, depth);
// this is a 2 by 2 by 2 box, if dont specify the parameters, it will be a unit cube (1 by 1 by 1)
// can simplify the above code to:
const geometry = new BoxBufferGeometry(2, 2, 2);
// material defines the appearance of the mesh
// we will use a material named MeshBasicMaterial
// it is the simplest material available, and dont have any lighting effects
// create a default (white) basic material
const material = new MeshBasicMaterial();
// if we use every material but MeshBasicMaterial, we wont be able to see anything, because scene is black
// create a Mesh containing the geometry and meterial
const cube = new Mesh(geometry, material);
// add the mesh to the scene
// if want to delete it, can use `scene.remove(cube)`
// once mesh is added to the scene, we call the mesh the child node of the scene, and we call the scene the parent node of the mesh
scene.add(cube);
// if the scene is a tiny universe, and the camera is a telescope pointed at that universe
// then the renderer is an artist who looks through the telescope and draws what they see onto a <canvas>
// create the renderer
// here we use WebGLRenderer
// WebGLRenderer uses WebGL2 to render the scene (if available)
// if disavailable, it will fall back to WebGL V1
const renderer = new WebGLRenderer();
// next, set the renderer to the same size as our container element
renderer.setSize(container.clientWidth, container.clientHeight);
// finally, set the pixel ratio so that our scene will look good on HiDPI displays
renderer.setPixelRatio(window.devicePixelRatio);
// add the automatically created <canvas> element to the page
container.append(renderer.domElement);
// render, or 'create a still immage', of the scene
renderer.render(scene,camera);
Directory structure
The assets Folder
Anything used in our app that is not HTML, CSS, or Javascript goes in here: textures, 3D models, fonts, sounds, and so on.
The vendor Folder
The vendor/ folder is where put Javascript files that other people have written. For learning Three.js, that means files from the three.js library, downloaded from the three.js Github repo.
demo1
│
├── assets # save static resources
│ └── images # images folder
│ └── fonts # font folder
│ └── icons # icon folder
│
├── src # save the source code
│ ├── main.js # the main JavaScript file
│ └── components # components folder
│ └── services # services and API folder
│
├── styles # save the style file
│ ├── main.css # the main style file
│ ├── _variables.css# style variables
│ ├── _mixins.css # style mix-in
│ ├── _reset.css # reset the style
│ └── components # component style folder
│
├── vendor # save third-party library files
│ └── jquery # save external libraries such as jQuery
│ └── bootstrap # save external libraries such as Bootstrap
│
└── index.html # the main html file
Actually, I keep the three.js library outside of my project folder. my directory structure is as follows：
